import React, {Component} from 'react'
import {View, Image, StyleSheet, Text, TouchableOpacity} from 'react-native'
import Login from '../login/login'
export default class HeaderView extends Component {

    onHeaderImgclick(){
        this.props.navigation.navigate('Login')
    }
    render() {
        return (
            <View style={styles.headerStyle}>
                <View style={styles.headerContentStyle}>

                    <TouchableOpacity activeOpacity={0.8} onPress={this.onHeaderImgclick.bind(this)}>
                        <Image source={require('../../../imgs/see.png')}
                               style={styles.headerImageStyle}
                        />
                    </TouchableOpacity>

                    <Text style={{fontSize: 18, color: 'white',}}>小马哥电商</Text>

                    <Image source={require('../../../imgs/avatar_vip.png')}
                           style={{width: 20, height: 20}}/>

                    <Image source={require('../../../imgs/icon_cell_rightarrow.png')}
                           style={{height: 20, width: 10, position: 'absolute', right: 15}}/>

                </View>

                <View style={styles.headerBottomStyle}>

                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Text style={styles.headerBottomText}> 50 </Text>
                        <Text style={styles.headerBottomText}> 马哥券 </Text>
                    </View>

                    <View style={{backgroundColor: 'white', width: 2}}/>

                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Text style={styles.headerBottomText}> 150 </Text>
                        <Text style={styles.headerBottomText}> 评价 </Text>
                    </View>

                    <View style={{backgroundColor: 'white', width: 2}}/>

                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Text style={styles.headerBottomText}> 25 </Text>
                        <Text style={styles.headerBottomText}> 收藏 </Text>
                    </View>
                </View>
            </View>

        )
    }
}


const styles = StyleSheet.create({

    headerStyle: {
        height: 195,
        backgroundColor: '#f09738'
    },

    headerContentStyle: {
        marginTop: 55,
        paddingLeft: 3,
        flexDirection: 'row',
        height: 70,
        alignItems: 'center'
    },
    headerImageStyle: {
        height: 70,
        width: 70,
        borderWidth: 2,
        borderColor: '#cccccc',
        borderRadius: 45,
        marginRight: 5,
    },
    headerBottomStyle: {
        marginTop: 20,
        height: 50,
        flexDirection: 'row',
        backgroundColor: 'rgba(255,255,255, 0.3)',
    },
    headerBottomText: {
        color: 'white',
        fontSize: 16
    }

})